<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="商户号" prop="merchantNum">
            <el-input v-model.trim="filterForm.merchantNum" placeholder="请输入商户号"></el-input>
          </el-form-item>
          <el-form-item label="商户名称" prop="merchantName">
            <el-select
              v-model="filterForm.merchantName"
              filterable
              remote
              reserve-keyword
              placeholder="（查询搜索框）"
              :remote-method="remoteMethod"
              :loading="selectLoading">
              <el-option
                v-for="item in merchantOptions"
                :key="item.id"
                :label="item.merchantName"
                :value="item.merchantName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户手机号" prop="merchantPhone">
            <el-input v-model.trim="filterForm.merchantPhone" maxlength="16" placeholder="请输入商户手机号"></el-input>
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button type="primary" @click="handleFilter">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <dt-table
        ref="dtTable"
        v-loading="loading"
        :table-opts="tableOpts"
        row-key="id"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="getList"
      >
        <template #operatorBtn="{param}">
          <el-button size="small" @click="changeState(param)" v-permission="['MERCHANT_MANAGE_STATE_BUTTON']">{{ param.state == 1 ? '禁用' : '启用' }}</el-button>
        </template>
      </dt-table>
    </div>
    <myDtDetail ref="dtDetailRef" :dt-detail-option="detailOption" class="merchant-detail" />
  </div>
</template>

<script>
import { getPage, qryAuthMerchantByName, editMerchantState, getDetail } from '@/api/unifiedPayment/merchantMange'
import myDtDetail from '../components/dt-detail'

export default {
  components: { myDtDetail },
  dicts: ['upStatus'],
  data() {
    return {
      filterForm: {
        merchantNum: '',
        merchantName: '',
        merchantPhone: '',
        pageNo: 1,
        pageSize: 10
      },
      systemList: [],
      tableOpts: {
        rowKey: 'id',
        toolbarBtn: [],
        tableData: [],
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          index: true
        },
        tableCol: [
          {
            prop: 'merchantNum',
            label: '商户号',
            show: true
          },
          {
            prop: 'merchantName',
            label: '商户名称',
            show: true
          },
          {
            prop: 'merchantPhone',
            label: '商户手机号',
            show: true
          },
          {
            prop: 'state',
            label: '状态',
            show: true,
            type: 'dict',
            formatter: (row) => { return this.dict.type.upStatus }
          },
          {
            prop: 'merchantType',
            label: '商户类型',
            show: true,
            formatter: (row) => {
              if (row.merchantType == 1) {
                return '企业'
              } else if (row.merchantType == 2) {
                return '个人'
              }
              return '-'
            }
          },
          {
            prop: 'creditCode',
            label: '统一社会信用代码',
            show: true
          },
          {
            prop: 'idCard',
            label: '身份证号',
            show: true
          },
          {
            prop: 'bankSts',
            label: '银行卡渠道',
            show: true,
            formatter: (row) => {
              if (row.bankSts == 1) {
                return '已开通'
              } else if (row.bankSts == 2) {
                return '未开通'
              }
              return '-'
            }
          },
          {
            prop: 'scanSts',
            label: '扫码渠道',
            show: true,
            formatter: (row) => {
              if (row.scanSts == 1) {
                return '已开通'
              } else if (row.scanSts == 2) {
                return '未开通'
              }
              return '-'
            }
          },
          {
            prop: 'appSts',
            label: '手机app渠道',
            show: true,
            formatter: (row) => {
              if (row.appSts == 1) {
                return '已开通'
              } else if (row.appSts == 2) {
                return '未开通'
              }
              return '-'
            }
          }
        ],
        operator: {
          width: 200,
          operatorBtn: [
            {
              text: '详情',
              permission: ['MERCHANT_MANAGE_DETAIL_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.viewInfo(row) }
            }
          ]
        }
      },
      total: 0,
      loading: false,
      selectLoading: false,
      merchantOptions: []
    }
  },
  computed: {
    detailOption() {
      return {
        labelWidth: '160px',
        width: '1000px',
        size: 'small',
        column: 2,
        rows: [
          {
            prop: 'merchantNum',
            label: '商户号'
          },
          {
            prop: 'merchantName',
            label: '商户名称'
          },
          {
            prop: 'merchantPhone',
            label: '商户手机号'
          },
          {
            prop: 'merchantType',
            label: '商户类型',
            type: 'function',
            callback: (data) => {
              if (data == 1) {
                return '企业'
              } else if (data == 2) {
                return '个人'
              }
              return '-'
            }
          },
          {
            prop: 'creditCode',
            label: '统一社会信用代码'
          },
          {
            prop: 'tradeChannel',
            label: '交易渠道'
          },
          {
            prop: 'systems',
            label: '关联业务系统',
            span: 2
          },
          {
            prop: 'appId',
            label: 'appid',
            span: 2
          },
          {
            prop: 'md5',
            label: 'MD5',
            span: 2
          },
          {
            prop: 'rsa',
            label: 'RSA',
            span: 2
          },
          {
            prop: 'rsa2',
            label: 'RSA2',
            span: 2
          },
          {
            prop: 'sm2',
            label: 'SM2',
            span: 2
          },
          {
            prop: 'sm4',
            label: 'SM4',
            span: 2
          }
        ],
        data: {}
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    viewInfo(row) {
      getDetail(row.id).then((res) => {
        const { data } = res
        if (data.bankSts == 1) {
          data.tradeChannel = '银行卡支付'
        }
        if (data.scanSts == 1) {
          data.tradeChannel = data.tradeChannel ? `${data.tradeChannel}、 扫码支付` : '扫码支付'
        }
        if (data.appSts == 1) {
          data.tradeChannel = data.tradeChannel ? `${data.tradeChannel}、 手机APP支付` : '手机APP支付'
        }
        if (data.paySystemList && data.paySystemList.length > 0) {
          data.systems = data.paySystemList.map((item) => item.systemName).join('、')
        }
        this.detailOption.data = data
        this.$refs.dtDetailRef.dialogVisible = true
      })
    },
    changeState(row) {
      editMerchantState({
        id: row.id,
        state: row.state == '1' ? '2' : '1'
      }).then((res) => {
        this.$dtModal.msgSuccess(res.message)
        this.getList()
      })
    },
    getList() {
      this.loading = true
      getPage(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
      }).finally(() => {
        this.loading = false
      })
    },
    // 搜索
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.filterFormRef.resetFields('filterForm')
      this.handleFilter()
    },
    remoteMethod(query) {
      if (query !== '') {
        this.selectLoading = true
        qryAuthMerchantByName(query).then((res) => {
          this.selectLoading = false
          this.merchantOptions = res.data
        })
      } else {
        this.merchantOptions = []
      }
    }
  }
}
</script>

<style lang="scss">
.merchant-detail .el-dialog__footer {
  display: none;
}
</style>
